<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String basePath = request.getScheme()+"://"+
			request.getServerName()+":"+request.getServerPort()+
			request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function () {
			//浏览器窗口键盘按下事件
			$(window).keydown(function (e) {
				//判断是否按的是回车键
				if (e.keyCode==13){
					$("#loginBtn").click();
				}
			})

			//按钮单击事件
			$("#loginBtn").click(function () {
				//收集参数 value trim:去空格
				var loginAct = $.trim($("#loginAct").val());
				var loginPwd = $.trim($("#loginPwd").val());
				// 获取 选中 属性值 .attr("属性名")
				// .prop("属性名") 获取属性值是true/false的属性的值 列如：checked，selected，readonly，disabled等
				var isRemPwd = $("#isRemPwd").prop("checked");

				//表单验证
				if (loginAct==""){
					alert("用户名不能为空！");
					return;
				}
				if (loginPwd==""){
					alert("密码不能为空！");
					return;
				}
				//显示正在验证
				// $("#msg").html("正在验证...");
				//发送请求
				$.ajax({
					url:"settings/qx/user/login.do",
					type:"post",
					data:{
						loginAct:loginAct,
						loginPwd:loginPwd,
						isRemPwd:isRemPwd
					},
					dataType:"json",
					success:function (data) {
						if (data.code=="1"){
							//登录成功，跳转到业务主页
							//同步：超链接、地址栏(location)、form表单
							window.location.href="workbench/index.do";
						}else {
							//登录失败，提示信息<span id="msg"></span>
							$("#msg").html(data.message);
						}
					},
					beforeSend:function () { 		//当ajax向后台发送请求之前会自动执行本函数
						$("#msg").html("正在验证...");//该函数的返回值能够决定ajax是否正真向后台发送请求
													//如果该函数返回true，则ajax会正真向后台发送请求，否则，返回false，则ajax放弃向后台发送请求。
						return true;
					}
				})

			})
		})
	</script>
</head>
<body>
	<div style="position: absolute; top: 0px; left: 0px; width: 60%;">
		<img src="image/home.png" style="width: 100%; height: 100%;max-width: 100% ;max-height: 100%;position: relative; top: 50px;">
	</div>
	<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
		<div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM &nbsp;<span style="font-size: 12px;">&copy;2022&nbsp;广东白云学院</span></div>
	</div>
	
	<div style="position: absolute; top: 120px; right: 100px;width:450px;height:400px;border:1px solid #D5D5D5;background-color: white;">
		<div style="position: absolute; top: 0px; right: 60px;">
			<div class="page-header">
				<h1>登录</h1>
			</div>
			<form action="workbench/index.html" class="form-horizontal" role="form">
				<div class="form-group form-group-lg">
					<div style="width: 350px;">
						<input class="form-control" id="loginAct" type="text" value="${cookie.loginAct.value}" placeholder="用户名">
					</div>
					<div style="width: 350px; position: relative;top: 20px;">
						<input class="form-control" id="loginPwd" type="password" value="${cookie.loginPwd.value}" placeholder="密码">
					</div>
					<div class="checkbox"  style="position: relative;top: 30px; left: 10px;">
						<label>
							<c:if test="${not empty cookie.loginAct and not empty cookie.loginPwd}">
								<input type="checkbox" id="isRemPwd" checked>
							</c:if>
							<c:if test="${empty cookie.loginAct or empty cookie.loginPwd}">
								<input type="checkbox" id="isRemPwd">
							</c:if>
							十天内免登录
						</label>
						&nbsp;&nbsp;
						<span id="msg" style="color: red"></span>
					</div>
					<button type="button" id="loginBtn" class="btn btn-primary btn-lg btn-block"  style="width: 350px; position: relative;top: 45px;">登录</button>
				</div>
			</form>
		</div>
	</div>
</body>
</html>